.posts
  padding: 2rem


.posts-item
  padding: 1.4rem 1rem
  margin: 1rem 0
  border-bottom: 1px solid lighten($color-gray, 70%)
  position: relative
  background: $color-white
  &--pintop
    &::before
      content: ''
      width: 70%
      height: 70%
      position: absolute
      top: 0
      right: 0
      box-shadow: 8px -8px 20px rgba(0,0,0,0.1)
      transform-origin: 100% 0%
      transform: skew(-5deg, -5deg)
      z-index: -1
    &::after
      content: ''
      position: absolute
      top: -10px
      right: -19px
      width: 60px
      height: 60px
      background-image: url('')
      background-size: contain
      background-repeat: no-repeat
      background-position: center

  &:hover
    h2
      a
        box-shadow: inset 0 -0.8em 0 $color-main

  &__title
    text-size(l-1)
    margin-bottom: 6rem
    a
      text-decoration: none
      box-shadow: inset 0 -0.3em 0 $color-main
      transition:box-shadow .5s cubic-bezier(.71, 0, 0, .99)
    &--image
      margin-bottom: 0

  &__image
    width: 100%
    height: 20rem
    margin: 2.4rem 0
    object-fit: cover
    border: 6px solid $color-white
    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.15)

  &__excerpt
    text-size(s-1)
    margin: 2rem 0 0 0
    color: $color-black-3
    img
      width: 100%;

.post__tags, .post__date
  position: relative
  text-size('s-1')
  display: inline-block
  &::before
    content: ''
    background-position: center
    background-size: contain
    background-repeat: no-repeat
    width: 1em
    height: 1em
    position: absolute
    top: 50%
    left: 0
    transform: translateY(-50%)

.post__date
  padding-left: 1.4em
  padding-right: 3.4em
  &::before
    background-image: url('')

.post__tags
  padding-left: 1.4em
  padding-right: 0.8em
  text-decoration: underline
  &::before
    background-image: url('')

@media screen and (max-width: $M)
  .posts
    padding: 1rem
  .posts-item
    &__title
      text-size(m-3)
      margin-bottom: 4rem
      &--image
        margin-bottom: 0

